<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 1、js中typeof返回的是那些数据类型 -->
    <!-- 7 种分别为 string、boolean、number、Object、Function、undefined、symbol(ES6) -->

    <!-- 2、split和join的区别 -->
    <!-- 1、join()把一个数组的所有元素放入一个字符串里面。

    2、join()中的元素是由指定的分隔符进行分离开的。

    3、split()方法用来把一个字符串分割成字符串数组。

    4、然而stringStr.split('切割点',‘设置切割长度，否则整个字符串都会被分割，不考虑它的长度’)； -->
     
    <!-- 3、事件委托是什么
    事件委托也叫事件代理，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，
    让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。 -->

    <!--4、添加、删除、替换以及插入节点的方法 操作dom -->

    <!-- 添加节点 -->
    <!-- obj.appendChild(node)
    1、把新的子节点添加到指定节点，node表示的就是要添加的节点。
    2、只能在父节点的末尾添加元素。 -->
   
    <!-- 删除节点
    removeChild(node)
1、删除子节点（元素）
2、如果在table中直接写tr时，然后用table当作父元素，给里面添加行，会报如下错误。
因为table里面直接写tr，虽然不会报错，但浏览器会给你生成一个tbody，
这样就会导致tr不是table的孩子，就会出现这样的错误，
所以要注意父元素是否写对，其实也可通过子选父，
这样保证了不会出现这样的错误。
 3、在添加元素时也会有这样的问题。 -->
<!-- 
 替换节点
obj.replaceChild(newnode,oldnode)
用新节点替换某个子节点。
oldnode节点必须是obj元素子节点，
他的返回值是一个指向已经被替换的那个子节点的引用指针。 -->

<!-- 插入节点
obj.insertBefore(node,existingnode)
在指定的已有子节点之前插入新的子节点。
node表示要添加的节点，existingnode表示在其之前插入新节点的子节点。
如果未规定，则 insertBefore 方法会在结尾插入。 -->


<!-- 5.
        // (1)首先 通过原生获取dom元素的方法Tagname('input'),获取到所有的input标签
        // (2)然后声明一个空数组
        // (3)通过for循环，循环结束的条件是所有input标签的长度
        // (4)通过if判断每一个input元素的type 类型 是不是为 checked 
        // (5)是的话 push 到空数组里 不是的话不做操作
        // (6)最后循环结束，就可以得到所有的type为checked 的input 标签 -->

<!-- 6、 -->
<script>
    // var foo = '11' +2-'1';
    // console.log(foo);     字符串 + 数字 数字会默认转为字符串进行拼接
    // console.log(typeof foo);   // number   两个字符串进行相减的话 会转换成数字类型进行相减 


  // 7.
        var arr ='get-element-by-id'
        function fn(){
            var foo1 = []
            arr.split('-').forEach((item,index) =>{
                if(index != 0){
                    // js 的 toUpperCase 是转为大写
                    item = item[0].toUpperCase() + item.slice(1)
                }
                foo1.push(item)

            })
            return console.log((foo1).join(''));
        }
        fn()
 // 8. splice 数组的替换，删除，插入(万能方法) 
//   Array.splice('数组中当前元素的下标','要删除的个数'，'要替换的数据')

    //    给对象绑定事件
 // 9. (1)支持的游览器不同。attachevent在IE9以下的版本中收到支持。其他的都支持addEventListener(比如我们常用的谷歌游览器)
        //    (2)参数不同。addeventlistener 第三个参数可以指定是否捕获 （事件 函数名 是否捕获），而attachEvent不支持捕获
        //    (3)针对的事件不同 attachEvent中的事件带on 而addEventListener中的事件不带on 

// 10. 设置一个宽高相等的盒子 设置一个背景色 然后通过圆角边框border-radius :50%   就实现了
// 11 (1)用 display flex 弹性盒子  将#content设置为弹性盒 通过justify-content：center align-items:center 就实现了
// (2)  用绝对定位  top:50% left:50% transfrom translace (-50%,-50%)

 // 12.
        //   输入例子 : foo([1,2,4,4,3,3,1,5,3]).sort()
        //   输出例子 : [1,3,4]
        //   function foo(arr){
        //         var obj = {}
        //         arr.forEach(item =>{
        //               if(obj[item]){
        //                   obj[item]++
        //               } else{
        //                   obj[item] = 1
        //               }
        //         })

        //         var brr = []

        //         for (const key in obj) {
        //                 if(obj[key] > 1){
        //                         brr.push(Number(key))
        //                 }
        //         }

        //         return console.log(brr);
        //   } 

        //   foo([1,2,4,4,3,3,1,5,3].sort())

        // 13.
        // 输入例子: 'http://item.taobao.com/item.html?a=1&b=2&c=&d=xxx&e'
        // 输出: { a: '1', b: '2',c:'',d:'xxx',e:undefined}
        // 首先用split进行分割？ 分成前后 在分割& 产生一个数组  进行循环遍历 再分割=  obj[item[0]] = item[1]
        // var img = 'http://item.taobao.com/item.html?a=1&b=2&c=&d=xxx&e'
        // var arr = img.split('?')[1].split('&')
        // var obj = {}
        // arr.forEach(item =>{
        //     item = item.split('=')
        //     obj[item[0]] = item[1]
        // })
        // console.log(obj);

        // 14.
        // 结果是 4个4  
        // (1)可以在外层嵌套函数 函数自调用  for循环是同步任务 定时器的异步任务  先执行
        // for (var i = 0; i <= 3; i++) {

        //     (function f1(e) {
        //         // console.log(e);
        //         setTimeout(() => {
        //             console.log(e);
        //         }, 0)
        //     })(i)
        // }

        // (2) 将var 改为 let
        // let块级作用域 锁定变量 var是全局变量 存在变量声明
        // for(let i=0;i<=3;i++){
        //     setTimeout(() => {
        //         console.log(i);
        //     }, 0);
        // }

</script>

</html>